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О себе 


Игорь Костяков 


Технический директор 
IBS Dunice 


e Разрабатываю Ha JS с 15 лет 


ө Ответственен за технологии, 
стандарты и технический уровень 
сотрудников в компании 


IBS Dunice 


e Популяризирую ценность знаний 
в команде 


® Считаю, что все разумно в меру, 
и выбираю инструменты, исходя 
из задач 


Frontend 
Conf 2022 


Многопоточность в браузере 


“code Гаа | tes | [code | dom | eo 


single-threaded process multithreaded process 
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Обзор dedicated (web) worker 


main.js worker.js 
Main Page / A Background Task 
IM PRECARE new Worker ( ) 5 
Non Bloking Code { Start 


progress 


progress 


progress 


done! 


worker. terminate ) ( 
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Обзор dedicated worker 


Dedicated Dedicated Dedicated 
worker worker worker 
Main Main 
Tab#1 Tab#2 


Dedicated 
worker 
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Обзор shared worker 


Shared 
worker 
Main Main Main 
Tab#1 Tab#2 Тар#5 
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Обзор service worker 


request” 


response ₪7 


WEB PAGE SERVICE / SERVER 
SERVICE WORKER 


response* 
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Чуть ближе к реальности 


Framework 
Your App(s) 


VDom Engine 


IBS Dunice 


Backend 


DOM operations 


Main Thread 
(Browser Window) 
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CQ а gihubcom 


Search or jump to Pullrequests Issues Marketplace Explore 


xtend GitHub 


d tools to improve your workflow 


=xplore free apps 


е5 Q Search for apps and actio 


CircleCl 


egories 
manageme: 
at Rewind Backups for GitHub 
(Formerly BackHub) 
Зе quality By backhub © 


Dunice 


Perf 


ormance monitor 


x 


FC 


Frontend 
Conf 


Рубрика “Эксперимент” 
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Воркеры + фреймворк = 
«Мощь, которая и не снилась моему отцу» 
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Воркеры + фреймворк= 
«Мощь, которая и не снилась моему отцу» 


Backend 
Shared Shared Shared 
VDom Worker App Worker Data Worker 


Your App(s) 


Main Thread Main Thread Main Thread 
(Browser Window) (Browser Window) (Browser Window) 
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Архитектура фронтенд-приложений будущего 


Main (ОТ) 
Тһгеаа 


Event triggered 


Render 


Thread Event triggered 
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call Business Logic actions 


App State Changed Backend DBMS 
call BL actions o $ 
2 2 
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App State Changed — - 
| ws | Interceptors | Configs 
| Shared worker fetch Auth | 
call BL actions 
App State Changed AppState API | Adapter | 
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App State Changed 
Indexed DB 
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Основной поток (вкладка браузера) 
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Thread 
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Поток виртуального рендеринга 
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Event 
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Поток бизнес-логики 


Shared worker 


Business 
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Поток — сетевой адаптер 


Service worker 
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Архитектура фронтенд-приложений будущего 
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Event triggered 


Render 
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call Business Logic actions 
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App State Changed 
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А может, мы уже в будущем? 


WebSocket + 
SharedWorker 


Shared soh noi Backend 
worker 


Server 


socket push 


update 
socket push 
fetch 


update 


Main Main 


fetch 
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А может, мы уже в будущем? 
Stackblitz – WebContainers 


e Faster than your local environment 
e Node.js debugging in-browser 
% Zero latency. Works offline 


® Secure by default 
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Parallel Store — Demo 
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(is) listen.worker.ts X 


14 context.portList.add(port); 

15 

16 port.addEventListener( 

17 'message', 

18 (event: MessageEvent«MessageToWorkerData») => { 
19 const ( op, storeName - 'DEFAULT', key ) - event.data; 
20 

21:5 if (!(storeName in context.stores)) {~ 

23 1 

24 

25 const currentStore = context.stores[storeName]; 
26 

277 if (op === 'GET') {~ 

40 > } else if (op === 'SET') {= 

48 } else if (op === 'RUN_ACTION') { 

49 const { args } = event.data; 

50 

51 if (key in currentStore.actions) { 

52 currentStore.actions[key](currentStore.data, ...args); 
53 } 

54 } else if (ор === 'CREATE_ACTION') { 

55 if (!(key in currentStore.actions)) { 

56 const { source } = event.data; 

57 

58 if (source.startsWith('function')) + 

59 currentStore.actions[key] = Function( 

60 ""use strict";return(${source}) ` 

61 or 

62 } else { 

63 currentStore.actions[key] - Function( 

64 ""use strict";return( function '((06ז500+%‎ 
65 or 

66 1 

67 } 

68 } 

ва л. 


[E] defineStore.ts X 
1 import { inject, Ref, customRef } from 'vue'; 
import + ParallelStoreGlobal } from './@types/ParallelStoreGlobal'; 


import + parallelStoreInjectionToken } from './injectionToken'; 


parallelStore: ParallelStoreGlobal, 
storeName: string, 


2 

3 

4 

5 

6 const buildRef = <T>( 
7 

8 

9 key: string, 


10 initialvalue: T 

11 ): Ref<T> => { 

12 let refTrigger: () => void; 

13 let value: T = initialValue; 

14 const ref: Ref<T> = customRef((track, trigger) => { 
15 refTrigger = trigger; 

16 return { 

17 get() { 

18 track(); 

19 return value; 

20 }, 

21 set(newValue) { 

22 value = newValue; 

23 parallelStore.worker.postMessage({ op: 'SET', storeName, key, value }); 
24 trigger(); 

25 }, 

26 }; 

27 D 

28 (ref as any).sync = (newvalue: T) => ( 

29 value - newValue; 

30 refTrigger(); 

31 }; 

32 parallelStore.worker.postMessage({ ор: 'СЕТ', storeName, key, value }); 
33 

34 return ref; 
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import + Ref } from 'мие'; 
import + defineStore } from '../plugins/ParallelStore'; 


interface CounterStoreState { 
counter: Ref<number>; 


} 


export const useCounterStore = defineStore( 
'CounterStore', 
() => ({ counter: 0 )), 


{ 


incrementAction(state: CounterStoreState, value = 1) { 


state.counter.value += value; 
incrementLaterAction(state: CounterStoreState, value 
setTimeout(() => { 
state.counter.value += value; 
}, 1000); 
}, 


); 


1) + 


Y FirstPage.vue X 


1 <script setup» 

2 import fi ref D from 'vue'; 

з import { useWorkerRef } from '../plugins/ParallelStore'; 

4 import ( useCounterStore } from '../store/counter'; 

5 

6 defineProps({ 

7 msg: String, 

в }); 

9 

10 const count = useWorkerRef('count', 0); 

11 

12 const counterStore = useCounterStore(); 

13 </script> 

14 

15 «template» 
16 <hi>{{ msg }}</һ1> 

17 

18 «div class-"card"» 

19 <span>counterStore.counter is {{ counterStore.counter }}</span> 
20 <br /> 

21 <button type="button" @click="counterStore.counter++"> 

22 Update ref by increment 

23 </button> 

24 «button type="button" Qclick-"counterStore.incrementAction()"» 
25 update by action 

26 </button> 

27 «button type="button" @click="counterStore.incrementLaterAction(11)"> 
28 update by async action (after 1 sec) 


</button> 
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Заключение 


Service Workers в св 


Shared Web Workers 5-5 


Shared Web Workers B-s 


Web Workers B-s 
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Usage 
Global 


Usage 
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96 of all users $ ? 


96.59% + 0.08% = 96.67% 


% of] tracked desktop > | ? 


89.29% 
3.94% 

% of all users > 7 
98.41% 
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Полезные ссылки 


Ссылка на Demo - Stackblitz, Github 

Выступление Surma Ha Chrome Dev Summit 2019 — 

The main thread is overworked & underpaid 

Surma для Smashing Magazine - The State Of Web Workers In 2021 
Comlink - Github 

Neo.mjs - Github, Blog & examples 


Ayush Gupta для dev.to - Scaling WebSocket Connections usin 
Shared Workers 


Stackblitz - Introducing WebContainers: Run Node.js natively in your 
browser 
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Спасибо за внимание! 


Игорь Костяков © @ikostyakov 
Технический директор i.kostyakov@dunice.net 
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